<template>
  <div>
    menu
    <p>
      {{username}} {{count}}
    </p>
    <!-- commit时需要带上模块名 -->
    <!-- <button @click="$store.commit('userModule/change')">change count </button> -->
    <button @click="change">change count </button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState({
      username: state => state.userModule.username,
      count: state => state.numMudule.count
    })
  },
  methods: {
    // 映射时同样的也需要带上模块名
    ...mapMutations([
      'userModule/change'
    ]),
    change () {
      // 调用上面的映射方法
      this['userModule/change']()
    }
  }
}
</script>

<style>

</style>
